<template>
  <div>
    <!-- <div @click="toProfile">个人中心</div> -->
    <homeHeader />
    <van-tabs v-model="activeTab" sticky swipeable>
      <van-tab v-for="(tabItem,index) in tabList " :key="index" :title="tabItem.name">
        <!-- <div v-for="(post,index) in tabItem.posts" :key='index'> -->
        <!-- {{post.title}}
        </div>-->
        <van-list
          v-model="loading"
          :finished="tabItem.finished"
          finished-text="没有更多了"
          @load="loadMorePost"
          :immediate-check="false"
        >
          <post :post="post" v-for="(post,index) in tabItem.posts" :key="index"></post>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import homeHeader from "../components/homeHeader";
import post from "../components/post";
export default {
  components: {
    homeHeader,
    post
  },
  data() {
    return {
      // 无论是否登陆，打开首页默认显示头条这一栏
      activeTab: localStorage.getItem("token") ? 1 : 0,
      tabList: [],
      pageSize: 5,
      loading: false
    };
  },
  watch: {
    activeTab(newActiveTab) {
      if (this.tabList[newActiveTab].posts.length == 0) {
        this.getTabPosts(newActiveTab);
      }
    }
  },
  methods: {
    initTabList() {
      this.$axios({
        url: "/category",
        method: "get"
      }).then(res => {
        console.log("这里是tab栏" + res.data);
        const { data } = res.data;
        data.forEach(element => {
          element.posts = [];
          element.currentPage = 1;
          element.finished = false;
        });
        this.tabList = data;
        this.getTabPosts(this.activeTab);
        console.log(this.tabList);
      });
    },
    getTabPosts(tabIndex) {
      //  console.log(this.tabList[tabIndex]);

      const categoryId = this.tabList[tabIndex].id;
      // console.log(category);

      this.$axios({
        url: "/post",
        method: "get",
        params: {
          category: categoryId,
          pageSize: this.pageSize,
          pageIndex: this.tabList[tabIndex].currentPage
        }
      }).then(res => {
        const { data } = res.data;
        console.log("这里是文章渲染" + data);

        // this.tabList[tabIndex].posts = data;
        // 不能直接覆盖数据需要拼接

        // 使用 es6 解构语法拼接数据
        const newData = [...this.tabList[tabIndex].posts, ...data];

        this.tabList[tabIndex].posts = newData;

        // 这个时候数据获取完毕了,我们要手动将读取状态 this.loading 设置为 false;
        // 可以隐藏掉加载中那几个字

        this.loading = false;

        // 如果新获取的 data 数据长度 少于我们设置的 每页数据大小
        // 那么就是说我们已经翻到最后一页了,
        // 就要将当前 tab 分类下面记录的那个 finished 设置为 true;

        if (data.length < this.pageSize) {
          // 将当前 tab 的 finished 属性修改为 true
          // 避免下一次的继续出发加载函数
          this.tabList[this.activeTab].finished = true;
        }
      });
    },
    loadMorePost() {
      setTimeout(() => {
        // 每当拉到底部,就会触发这个加载函数
        // 我们需要做的,无非就是将当前 tab 分类下面记录的 currentPage 加1
        // 然后触发 ajax 请求获取页面数据即可
        // 当前被激活的分类
        this.tabList[this.activeTab].currentPage += 1;
        // 发送 ajax 请求获取新文章
        this.getTabPosts(this.activeTab);
      }, 1000);
      console.log("触发了加载函数");
      
    }
  },
  mounted() {
    this.initTabList();
  }
};
</script>